<template>
	<view :style="{'--color':color}">
		<accountDeal @business="show = true" Type="3"></accountDeal>
		<view class="utabs">
			<u-tabs :list="list1" :scrollable="false" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
				lineColor="#333" @click="click"></u-tabs>
		</view>

		<view class="lists">
			<text class="size30">单号：32465745463545</text>
			<text class="size28 m-top10">出售账号：judiore</text>
			<text class="size28 m-top10">交易金额：1253.00</text>
			<text class="size26 m-top10">2014-11-11 12:21:09</text>
			<text class="State">买入</text>
		</view>
		<view class="lists">
			<text class="size30">单号：32465745463545</text>
			<text class="size28 m-top10">购买账号：judiore</text>
			<text class="size28 m-top10">交易金额：1253.00</text>
			<text class="size26 m-top10">2014-11-11 12:21:09</text>
			<text class="State">卖出</text>
		</view>



		<paypass v-if="showPay" @Close="showPay = false"></paypass>


		<u-popup :show="show" @close="show = false">
			<view class="noMoney">交易账户非团队成员</view>
			<view class="uPopup">

				<view class="list">
					<input type="digit" class="Input" v-model="Money" placeholder="请输入卖出金额文票" />
				</view>
				<view class="list">
					<input type="text" class="Input" v-model="Account" placeholder="请输入买家账号" />
				</view>
				<view class="Btn" :class="{'bgcolor':agree}" @click="sellBtn">卖出</view>
			</view>
		</u-popup>
	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex'
	import paypass from '../components/paypass.vue'
	export default {
		components: {
			paypass
		},
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '卖出',
				}, {
					name: '买入',
				}],
				current: 0,
				show: false,
				showPay: false,
				Money: '',
				Account: '',
			}
		},
		methods: {
			click(e) {
				this.current = e.index;
				this.$pop.pageScrollTo();
			},
			sellBtn() {
				this.show = false;
				this.showPay = true
			}
		},
		computed: {
			...mapState(['color']),

			inactiveStyle() {
				return {
					color: '#333',
					fontSize: '28rpx'
				}
			},
			activeStyle() {
				return {
					color: '#000',
					fontSize: '30rpx'
				}
			},
			agree() {
				if (this.Money && this.Account) return true;
			}

		},
	}
</script>

<style lang="scss" scoped>
	.lists {
		width: 690rpx;
		padding: 24rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin: 24rpx auto 0;
		position: relative;
		display: flex;
		flex-direction: column;
		color: #333;
		font-size: 26rpx;

		.eind {
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			.eili {
				font-size: 26rpx;
				color: #333;
			}

			.eili:nth-child(2) {
				display: flex;
				justify-content: center;
			}
		}

		.State {
			font-size: 36rpx;
			color: #000;
			position: absolute;
			top: 30rpx;
			right: 20rpx;
		}
	}

	.noMoney {
		width: 100;
		height: 60rpx;
		background-color: #ffcccc;
		color: #ff1362;
		font-size: 26rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.uPopup {
		width: 100%;
		padding: 20rpx 20rpx 100rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;



		.list {
			width: 400rpx;
			height: 80rpx;
			margin-top: 30rpx;
			border-radius: 40rpx;
			overflow: hidden;
			border: 1px solid #f2f2f2;

			.Input {
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 80rpx;
				color: #000;
				font-size: 28rpx;
			}
		}

		.Btn {
			width: 450rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 36rpx;
			background-color: #ccc;
			margin-top: 80rpx;
		}
	}
</style>